<!DOCTYPE html>
<html lang="en">
<!--[if lte IE 9]>
<script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script>
<![endif]-->
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/css/userweb/bootstrap.min.css">
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/userweb/common.css">
    <link rel="stylesheet" href="/css/userweb/index.css">
    <link rel="stylesheet" href="/css/userweb/myPagination.css">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
{include file="html/Common/indexHeader"}
<div class="index_container" id="homeVue">
    <!--轮播-->
    <div class="banner">
        <ul id="on"></ul>
        <div class="banner_list"></div>
    </div>
    <div class="content" v-cloak v-loading="loading">
        <!--优惠活动推荐-->
        <div class="discount_container" v-show="discount">
            <div class="discount_bar">
                <div class="title_tag_bar"></div>
                <div class="title_tag">
                    <p>
                        <span>优惠活动推荐special offer promotion</span>
                        <span>进行中</span>|
                        <span>预热中</span>
                    </p>
                </div>
                <div class="discount_change">
                    <div class="change_arrow" v-on:click="chang(1)">
                        <img src="/image/userweb/slicesImg/discount-change-left.png" alt="">
                    </div>
                    <div class="change_arrow arrow_area" v-on:click="chang(2)">
                        <img src="/image/userweb/slicesImg/discount-change-right.png" alt="">
                    </div>
                </div>
            </div>

            <!--编辑-->
            <div class="discount_bar" id="discount" style="margin-top:20px;">
                <div class="business_area" >
                    <a href="">
                        <div class="business_img">
                            <img src="http://xhl.oss-cn-shanghai.aliyuncs.com/product/5b3e91b6e1ff9.jpg" alt="">
                        </div>
                        <div class="business_info">
                            <div class="shop_name">
                                <div class="title_zh">11111111</div>
                                <!--<div class="title_en">{{list.name_english}}</div>-->
                            </div>
                            <div class="score_bar">
                                <div class="score_title">
                                    <span>评分/score</span>
                                </div>
                                <div class="score_img" ></div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>


            <div class="discount_cont">
                <div class="discount_area" v-for="list in discounts.list">
                    <a :href="'/userweb/index/productInfo.html?productId='+list.id">
                        <div class="discount_img">
                            <img :src="list.image" alt="">
                        </div>
                        <div class="discount_info">
                            <div class="title">
                                <a :href="'/userweb/index/productInfo.html?productId='+list.id">
                                    <div class="title_zh">{{list.discount_name}}</div>
                                    <!--<div class="title_en">{{list.discount_name_english}}</div>-->
                                </a>
                            </div>
                            <div class="name_info">
                                <div class="title_zh">{{list.supplier_name}}</div>
                                <!--<div class="title_en">{{list.supplier_name_english}}</div>-->
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="my_show_container">
            <div class="my_show_box">
                <!--商品分类-->
                <div class="categories_box" v-on:mouseleave="hiddenDetail()">
                    <div class="categories_list">
                        <div class="categories_list_title">
                            <div class="title_tag_bar"></div>
                            <div class="title_tag" v-on:click = "classification(5)">
                                <p>商品分类/categories</p>
                            </div>
                        </div>
                        <ul>
                            <li v-for="category in categories" v-if="category.parent_id == 0" onclick="changColor(this)" onmousemove="changColor(this)">
                                <a href="javascript:;" v-on:click = "classification(1,category.id)" v-on:mouseenter = "dataDetails(category.id)">
                                    <div class="list_title">
                                        <p>{{category.name}}/{{category.name_english}}</p>
                                    </div>
                                    <span class="list_arrow">
                                        <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="categories_content" v-show="type">
                        <div class="sub">
                            <dl v-for="type in categories" v-if="type.parent_id == classify_id">
                                <dt>
                                    <a v-on:click = "classification(2,type.id)">
                                        {{type.name}}/{{type.name_english}}</a>
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </dt>
                                <dd>
                                    <a v-for="small_type in categories" v-if="small_type.parent_id == type.id"
                                       onclick="smallType(this)" v-on:click = "classification(3,small_type.id)">
                                        {{small_type.name}}/{{small_type.name_english}}</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="my_show_content"  v-loading="loading">
                    <!--品牌-->
                    <div class="my_brand_box" v-show="brand">
                        <div class="brand_tit" id="brandLeft">
                            <div class="title_zh">品牌</div>
                            <div class="title_en">brand</div>
                        </div>
                        <div class="brand_content" id="brandRight">
                            <a href="javascript:;" v-for="brand in brands" onclick="brandColor(this)"
                               v-on:click = "classification(4,brand.id)">
                                <!--<div class="title_zh">{{brand.name}}</div>-->
                                <div class="title_en">{{brand.name_english}}</div>
                            </a>
                        </div>
                        <div></div>
                    </div>
                    <!--商家列表-->
                    <div class="my_show_area">
                        <div class="business_area" v-for="list in lists">
                            <a :href="'/userweb/index/shopList.html?supplierId='+list.id+'&classify='+classify">
                                <div class="business_img">
                                    <img :src="list.image" alt="">
                                </div>
                                <div class="business_info">
                                    <div class="shop_name">
                                        <div class="title_zh">{{list.name}}</div>
                                        <!--<div class="title_en">{{list.name_english}}</div>-->
                                    </div>
                                    <div class="score_bar">
                                        <div class="score_title">
                                            <span>评分/score</span>
                                        </div>
                                        <div class="score_img" v-html="list.star"></div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!--分页-->
                    <div class="pagination_box" v-html="paginate"></div>
                    <!--暂无数据-->
                    <div id="noData"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="slogan">
        <div class="slogan_title">
            <p>让我们的生活有更好的选择</p>
        </div>
        <div class="sub_slogan_title">
            <p>Let our lives have a better choice.</p>
        </div>
    </div>
</div>
{include file="html/Common/indexFooter"}
</body>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/loading.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/userweb/jquery.min.js"></script>
<script src="/js/userweb/common.js"></script>
<script src="/js/userweb/indexHome/indexHome.js"></script>
<script>
    function getDiscount(type,page){
        $.ajax({
            url:'/userweb/Homepage/getDiscountData',
            type:'post',
            data:{type:type,page:page},
            dataType:'json',
            success:function (res) {
                var html = '';
                $('#discount').html('');
                $.each(res.msg,function (index,item) {
                    html += '<div class="business_area" >\n' +
                        '                    <a href="">\n' +
                        '                        <div class="business_img">\n' +
                        '                            <img src="http://xhl.oss-cn-shanghai.aliyuncs.com/product/5b3e91b6e1ff9.jpg" alt="">\n' +
                        '                        </div>\n' +
                        '                        <div class="business_info">\n' +
                        '                            <div class="shop_name">\n' +
                        '                                <div class="title_zh">'+item.name+'</div>\n' +
                        '                                <div class="title_en">'+item.name_english+'</div>\n' +
                        '                            </div>\n' +
                        '                            <div class="shop_name">\n' +
                    '                                     <div class="title_zh">'+item.shop_name+'</div>\n' +
                    '                                      <div class="title_en">'+item.shop_name_english+'</div>\n' +
                    '                                 </div>\n' +
                        '                        </div>\n' +
                        '                    </a>\n' +
                        '                </div>';
                })
                $('#discount').html(html);
            }
        })
    }
    $(function(){
        getDiscount(1,1)
    })
</script>
<script>
    $(function() {
        bannerInit();
        getHeight();
        $("#index").addClass("active");
        $("#index").siblings().removeClass("active");
    });
    function getHeight() {
        if($("#brandLeft").height() > $("#brandRight").height()){
            $("#brandRight").css("height",$("#brandLeft").height());
        }else{
            $("#brandLeft").css("height",$("#brandRight").height());
        }
    }
    function changColor(_this) {
        $(_this).find('a').addClass('active');
        $(_this).siblings().find('a').removeClass('active');
        $(_this).find('a').find('span').find('img').attr('src',"/image/userweb/slicesImg/list-arrow-change.png");
        $(_this).siblings().find('a').find('span').find('img').attr('src',"/image/userweb/slicesImg/list-arrow.png");
    }
    function smallType(_this) {
        $('.sub').find('a').removeClass('active');
        $(_this).addClass('active');
    }
    function brandColor(_this) {
        $(_this).addClass('active');
        $(_this).siblings().removeClass('active');
    }
</script>
</html>